<template>
  <transition name="fade">
    <div class="cus-notify" :style="style" v-show="visible">
      <div class="content">{{ content }}</div>
      <span class="close" slot="close" @click="closeNotify">{{ close }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'cusNotify',
  data() {
    return {
      visible: true,
    };
  },
  props: {
    content: {
      type: String,
      required: true,
      default: '',
    },
    close: {
      type: String,
      default: '关闭',
    },
  },
  computed: {
    style() {
      return {};
    },
  },
  methods: {
    closeNotify() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.cus-notify {
  width: 340px;
  padding: 10px;
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  .content {
    flex: 1;
  }
  .close {
    cursor: pointer;
    &:hover {
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
